<template>
  <div class="app-container">
    <el-form ref="searchformRef" v-show="showSearch" :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="名称：" prop="Keywords">
        <el-input v-model="queryParams.Keywords" clearable placeholder="名称" />
        </el-form-item>
        <el-form-item>
        <el-button type="primary" @click="handleSearch()">查询</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
        <el-button-group>
          <el-button v-hasPermi="['THInvoiceDetail/Add']" type="primary" icon="plus" @click="ShowEditOrViewDialog()">新增</el-button>
          <el-button v-hasPermi="['THInvoiceDetail/Edit']" type="primary" icon="edit" :disabled="single" class="el-button-modify" @click="ShowEditOrViewDialog('edit')">修改</el-button>
          <el-button v-hasPermi="['THInvoiceDetail/Enable']" type="info" icon="video-pause" :disabled="multiple" @click="setEnable('0')">禁用</el-button>
          <el-button v-hasPermi="['THInvoiceDetail/Enable']" type="success" icon="video-play" :disabled="multiple" @click="setEnable('1')">启用</el-button>
          <el-button v-hasPermi="['THInvoiceDetail/DeleteSoft']" type="warning" icon="delete" :disabled="multiple" @click="deleteSoft('0')">软删除</el-button>
          <el-button v-hasPermi="['THInvoiceDetail/Delete']" type="danger" icon="delete" :disabled="multiple" @click="deletePhysics()">删除</el-button>
          <el-button type="default" icon="refresh" @click="loadTableData()">刷新</el-button>
        </el-button-group>
        <right-toolbar v-model:showSearch="showSearch" @queryTable="loadTableData"></right-toolbar>
     </el-row>
      <el-table
        ref="gridtable"
        v-loading="tableloading"
        :data="tableData"
        stripe
        highlight-current-row
        style="width: 100%"
        :default-sort="{prop: 'Id', order: 'ascending'}"
        @selection-change="handleSelectChange"
        @sort-change="handleSortChange"
      >
        <el-table-column type="selection" width="50" />
                <el-table-column prop="InvoiceID" label="发票ID" sortable="custom" width="120" />
        <el-table-column prop="InvoiceCode" label="发票代码" sortable="custom" width="120" />
        <el-table-column prop="InvoiceNo" label="发票号" sortable="custom" width="120" />
        <el-table-column prop="InvoiceRowNumber" label="发票行号" sortable="custom" width="120" />
        <el-table-column prop="GoodsName" label="商品名称" sortable="custom" width="120" />
        <el-table-column prop="GoodsSpec" label="规格" sortable="custom" width="120" />
        <el-table-column prop="GoodsUnit" label="单位" sortable="custom" width="120" />
        <el-table-column prop="GoodsAmount" label="数量" sortable="custom" width="120" />
        <el-table-column prop="GoodsPrice" label="单价" sortable="custom" width="120" />
        <el-table-column prop="GoodsTaxRate" label="税率" sortable="custom" width="120" />
        <el-table-column prop="GoodsTax" label="税额" sortable="custom" width="120" />
        <el-table-column prop="GoodsMoney" label="金额" sortable="custom" width="120" />
        <el-table-column prop="GoodsMoneyNoTax" label="无税金额" sortable="custom" width="120" />
        <el-table-column prop="GoodsCode" label="商品税号" sortable="custom" width="120" />
        <el-table-column prop="GoodsKind" label="商品分类" sortable="custom" width="120" />
        <el-table-column prop="CheckMoney" label="核对金额" sortable="custom" width="120" />
        <el-table-column prop="CheckStatus" label="核对状态" sortable="custom" width="120" />
        <el-table-column prop="IsCheckEnd" label="是否核对结束" sortable="custom" width="120" />
        <el-table-column prop="CheckTime" label="核对时间" sortable="custom" width="120" />
        <el-table-column prop="UpdateTime" label="更新时间" sortable="custom" width="120" />
        <el-table-column prop="SettleStatus" label="" sortable="custom" width="120" />
        <el-table-column prop="SettleMoney" label="" sortable="custom" width="120" />
        <el-table-column prop="SettleTime" label="" sortable="custom" width="120" />
        <el-table-column prop="IsJicai" label="" sortable="custom" width="120" />

      </el-table>
      <Pagination
        v-show="queryParams.pageTotal>0"
        :total="queryParams.pageTotal"
        v-model:page="queryParams.CurrenetPageIndex"
        v-model:limit="queryParams.PageSize"
        @pagination="loadTableData"
    />
    <el-dialog ref="dialogEditForm" draggable :title="editFormTitle+'发票明细信息'" v-model="dialogEditFormVisible"  width="660px" append-to-body>
      <el-form ref="editFromRef" :model="editFrom" :rules="rules">
                <el-col :span="12">
        <el-form-item label="发票ID" :label-width="formLabelWidth" prop="InvoiceID">
          <el-input v-model="editFrom.InvoiceID" placeholder="请输入发票ID" autocomplete="off" clearable />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="发票代码" :label-width="formLabelWidth" prop="InvoiceCode">
          <el-input v-model="editFrom.InvoiceCode" placeholder="请输入发票代码" autocomplete="off" clearable />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="发票号" :label-width="formLabelWidth" prop="InvoiceNo">
          <el-input v-model="editFrom.InvoiceNo" placeholder="请输入发票号" autocomplete="off" clearable />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="发票行号" :label-width="formLabelWidth" prop="InvoiceRowNumber">
          <el-input v-model="editFrom.InvoiceRowNumber" placeholder="请输入发票行号" autocomplete="off" clearable />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="商品名称" :label-width="formLabelWidth" prop="GoodsName">
          <el-input v-model="editFrom.GoodsName" placeholder="请输入商品名称" autocomplete="off" clearable />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="规格" :label-width="formLabelWidth" prop="GoodsSpec">
          <el-input v-model="editFrom.GoodsSpec" placeholder="请输入规格" autocomplete="off" clearable />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="单位" :label-width="formLabelWidth" prop="GoodsUnit">
          <el-input v-model="editFrom.GoodsUnit" placeholder="请输入单位" autocomplete="off" clearable />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="数量" :label-width="formLabelWidth" prop="GoodsAmount">
          <el-input v-model="editFrom.GoodsAmount" placeholder="请输入数量" autocomplete="off" clearable />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="单价" :label-width="formLabelWidth" prop="GoodsPrice">
          <el-input v-model="editFrom.GoodsPrice" placeholder="请输入单价" autocomplete="off" clearable />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="税率" :label-width="formLabelWidth" prop="GoodsTaxRate">
          <el-input-number v-model="editFrom.GoodsTaxRate" autocomplete="off" clearable />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="税额" :label-width="formLabelWidth" prop="GoodsTax">
          <el-input-number v-model="editFrom.GoodsTax" autocomplete="off" clearable />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="金额" :label-width="formLabelWidth" prop="GoodsMoney">
          <el-input-number v-model="editFrom.GoodsMoney" autocomplete="off" clearable />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="无税金额" :label-width="formLabelWidth" prop="GoodsMoneyNoTax">
          <el-input-number v-model="editFrom.GoodsMoneyNoTax" autocomplete="off" clearable />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="商品税号" :label-width="formLabelWidth" prop="GoodsCode">
          <el-input v-model="editFrom.GoodsCode" placeholder="请输入商品税号" autocomplete="off" clearable />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="商品分类" :label-width="formLabelWidth" prop="GoodsKind">
          <el-input v-model="editFrom.GoodsKind" placeholder="请输入商品分类" autocomplete="off" clearable />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="核对金额" :label-width="formLabelWidth" prop="CheckMoney">
          <el-input-number v-model="editFrom.CheckMoney" autocomplete="off" clearable />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="核对状态" :label-width="formLabelWidth" prop="CheckStatus">
          <el-input v-model="editFrom.CheckStatus" placeholder="请输入核对状态" autocomplete="off" clearable />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="是否核对结束" :label-width="formLabelWidth" prop="IsCheckEnd">
          <el-input v-model="editFrom.IsCheckEnd" placeholder="请输入是否核对结束" autocomplete="off" clearable />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="核对时间" :label-width="formLabelWidth" prop="CheckTime">
          <el-date-picker v-model="editFrom.CheckTime" placeholder="请选择核对时间" type="datetime" clearable />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="更新时间" :label-width="formLabelWidth" prop="UpdateTime">
          <el-date-picker v-model="editFrom.UpdateTime" placeholder="请选择更新时间" type="datetime" clearable />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="" :label-width="formLabelWidth" prop="SettleStatus">
          <el-input v-model="editFrom.SettleStatus" placeholder="请输入" autocomplete="off" clearable />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="" :label-width="formLabelWidth" prop="SettleMoney">
          <el-input-number v-model="editFrom.SettleMoney" autocomplete="off" clearable />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="" :label-width="formLabelWidth" prop="SettleTime">
          <el-date-picker v-model="editFrom.SettleTime" placeholder="请选择" type="datetime" clearable />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="" :label-width="formLabelWidth" prop="IsJicai">
          <el-input v-model="editFrom.IsJicai" placeholder="请输入" autocomplete="off" clearable />
        </el-form-item>
        </el-col>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogEditFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveEditForm()">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="THInvoiceDetail">

import { getTHInvoiceDetailListWithPager, getTHInvoiceDetailDetail,
  saveTHInvoiceDetail, setTHInvoiceDetailEnable, deleteSoftTHInvoiceDetail,
  deleteTHInvoiceDetail } from '@/api/thinvoicedetail/thinvoicedetail'

const { proxy } = getCurrentInstance()
const tableData=ref([])
const tableloading=ref(true)
const dialogEditFormVisible=ref(false)
const editFormTitle=ref("")
const showSearch = ref(true);
const single = ref(true);
const multiple = ref(true);

const formLabelWidth=ref("100px")
const currentId=ref("")// 当前操作对象的ID值，主要用于修改
const ids=ref([])

const data = reactive({
    queryParams:{
        CurrenetPageIndex: 1,
        PageSize: 20,
        pageTotal: 0,
        Order: 'desc',
        Sort: 'CreatorTime',
        Keywords: ''
    },
    editFrom: {},
    rules: {
        
    },
})
    
const { queryParams, editFrom, rules} = toRefs(data);
/**
    * 初始化数据
    */
function InitDictItem() {
}
    
// 取消按钮
function cancel () {
    dialogEditFormVisible.value = false
    reset()
}
// 表单重置
function reset () {
    editFrom.value = {
            InvoiceID: '',
        InvoiceCode: '',
        InvoiceNo: '',
        InvoiceRowNumber: '',
        GoodsName: '',
        GoodsSpec: '',
        GoodsUnit: '',
        GoodsAmount: '',
        GoodsPrice: '',
        GoodsTaxRate: '',
        GoodsTax: '',
        GoodsMoney: '',
        GoodsMoneyNoTax: '',
        GoodsCode: '',
        GoodsKind: '',
        CheckMoney: '',
        CheckStatus: '',
        IsCheckEnd: '',
        CheckTime: '',
        UpdateTime: '',
        SettleStatus: '',
        SettleMoney: '',
        SettleTime: '',
        IsJicai: '',
        
    //需个性化处理内容
    }
    proxy.resetForm('editFromRef')
}
/**
    * 加载页面table数据
    */
function loadTableData() {
    tableloading.value = true
    getTHInvoiceDetailListWithPager(queryParams.value).then(res => {
        tableData.value = res.ResData.Items
        queryParams.value.pageTotal = res.ResData.TotalItems
        tableloading.value = false
    })
}
/**
    * 点击查询
    */
function handleSearch() {
    queryParams.value.CurrenetPageIndex = 1
    loadTableData()
}

/** 重置查询操作 */
function resetQuery() {
  proxy.resetForm("searchformRef");
  handleSearch();
}

/**
    * 新增、修改或查看明细信息（绑定显示数据）     *
    */
function ShowEditOrViewDialog(view) {
    reset()
    if (view !== undefined) {
    if (ids.value.length > 1 || ids.value.length === 0) {
        proxy.$modal.alert('请选择一条数据进行编辑/修改', '提示')
    } else {
        currentId.value = ids.value[0]
        editFormTitle.value = '编辑'
        dialogEditFormVisible.value = true
        bindEditInfo()
    }
    } else {
    editFormTitle.value = '新增'
    currentId.value = ''
    dialogEditFormVisible.value = true
    }
}
function bindEditInfo() {
    getTHInvoiceDetailDetail(currentId.value).then(res => {
    editFrom.value = res.ResData
    //需个性化处理内容

    })
}
/**
    * 新增/修改保存
    */
function saveEditForm() {
    proxy.$refs['editFromRef'].validate((valid) => {
    if (valid) {
        var url = 'THInvoiceDetail/Insert'
        if (currentId.value !== '') {
        url = 'THInvoiceDetail/Update'
        }
        saveTHInvoiceDetail(editFrom.value,url).then(res => {
        if (res.Success) {
            proxy.$modal.msgSuccess('恭喜你，操作成功')
            dialogEditFormVisible.value = false
            loadTableData()
            InitDictItem()
        } else {
            proxy.$modal.msgError(res.ErrMsg)
        }
        })
    } else {
        return false
    }
    })
}
function setEnable(val) {
  if (ids.value.length === 0) {
    proxy.$modal.alert('请先选择要操作的数据')
    return false
  } else {
    const data = {
      Ids: ids.value,
      Flag: val
    }
    setTHInvoiceDetailEnable(data).then(res => {
      if (res.Success) {
        proxy.$modal.msgSuccess('恭喜你，操作成功')
        loadTableData()
      } else {
        proxy.$modal.msgError(res.ErrMsg)
        }
    })
    }
}
function deleteSoft(val) {
  if (ids.value.length === 0) {
    proxy.$modal.alert('请先选择要操作的数据')
    return false
    } else {
    proxy.$modal.confirm('是否确认删除所选的数据项?').then(function() {
      const data = {
        Ids: ids.value,
        Flag: val
      }
        return  deleteSoftTHInvoiceDetail(data)
    }).then(res => {
       if (res.Success) {
          proxy.$modal.msgSuccess('恭喜你，操作成功')
          loadTableData()
        } else {
          proxy.$modal.msgError(res.ErrMsg)
      }
    })
    }
}
function deletePhysics() {
  if (ids.value.length === 0) {
    proxy.$modal.alert('请先选择要操作的数据')
    return false
    } else {
    proxy.$modal.confirm('是否确认删除所选的数据项?').then(function() {
      const data = {
        Ids: ids.value
      }
        return  deleteTHInvoiceDetail(data)
    }).then(res => {
       if (res.Success) {
          proxy.$modal.msgSuccess('恭喜你，操作成功')
          loadTableData()
        } else {
          proxy.$modal.msgError(res.ErrMsg)
      }
    })
    }
}
/**
 * 当表格的排序条件发生变化的时候会触发该事件
 */
function handleSortChange(column) {
  if(column.prop!=null){
    queryParams.value.Sort = column.prop
  }
  if (column.order === 'ascending') {
    queryParams.value.Order = 'asc'
  } else {
    queryParams.value.Order = 'desc'
  }
  loadTableData()
}
/**
 * 当用户手动勾选checkbox数据行事件
 */
function handleSelectChange(selection) {
  ids.value = selection.map(item => item.Id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}
loadTableData()
</script>

<style>
</style>
